<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: src/widgets/xdh-grid-layout/xdh-grid-layout.vue</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: src/widgets/xdh-grid-layout/xdh-grid-layout.vue</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;grid-layout class="xdh-grid-layout" v-bind="layoutOptions" v-on="$listeners">
    &lt;grid-item v-for="(item, index) in layout"
               :key="item.i"
               v-bind="item"
               v-on="itemEvents">
      &lt;slot v-if="!$slots[item.i]" :item="item" :index="index">&lt;/slot>
      &lt;slot :name="item.i">&lt;/slot>
    &lt;/grid-item>
  &lt;/grid-layout>
&lt;/template>

&lt;script>
  /**
   * GridLayout 网格布局
   * @module widgets/xdh-grid-layout
   */

  import {GridItem, GridLayout} from 'vue-grid-layout'
  import {addResizeListener, removeResizeListener} from 'element-ui/lib/utils/resize-event'
  import {debounce} from '@/utils/util'

  /**
   * scopedSlots 作用域插槽
   * @member scopedSlots
   * @property {string} default 定义各网格内容，参数：item 网格配置， index 网格在layout 索引
   */

  /**
   * slots 插槽, 以layout数组各项的 i 名称定义指定网格内容
   * @member slot
   */

  /**
   * 布局更新时触发
   * @event layout-updated
   * @param {Array} newLayout 更新后的布局数组
   */

  export default {
    name: 'XdhGridLayout',
    components: {
      GridLayout,
      GridItem
    },
    /**
     * 属性参数
     * @member props
     * @property {Array} layout 初始化布局网格数组，数据项必须要包含 i,x,y,w,h
     * @property {String} layout.i 网格标识名称，要唯一
     * @property {number} layout.x 网格水平方向位置，Says what is a initial horizontal position of the item (in which column it should be placed).
     * @property {number} layout.y Says what is a initial vertical position of the item (in which row it should be placed).
     * @property {number} layout.w Says what is a initial width of the item.
     * @property {number} layout.h Says what is a initial height of the item.
     * @property {number} [layout.minW] Says what is a minimal width of the item. If w will be smaller then minW then w will be set to minW.
     * @property {number} [layout.minH] Says what is a minimal hieght of the item. If h will be smaller then minH then h will be set to minH.
     * @property {number} [layout.maxW]
     * @property {number} [layout.maxH]
     * @property {Boolean} [layout.isDraggable]
     * @property {Boolean} [layout.isResizable]
     * @property {String} [layout.dragIgnoreFrom]
     * @property {String} [layout.dragAllowFrom]
     * @property {String} [layout.resizeIgnoreFrom]
     * @property {number} [colNum=12] 网格列数
     * @property {Number} [rowHeight=150] 行高度
     * @property {Boolean} [fitRow=false] 根据容器高度自动计算行高, 如设置该值，rowHeight将失效
     * @property {Number} [maxRows] 最大行数
     * @property {Array} [margin=[10, 10]] 网格边距
     * @property {Boolean} [isDraggable=false] 能否拖拽
     * @property {Boolean} [isResizable=false] 能否改尺寸
     * @property {Boolean} [isMirrored=false] RTL/LTR should be reversed
     *
     */
    props: {
      // 初始化布局网格数组，数据项必须要包含 i,x,y,w,h,minW,minH,maxW,maxH,isDraggable,isResizable,
      // dragIgnoreFrom,dragAllowFrom,resizeIgnoreFrom
      layout: {
        type: Array,
        default() {
          return []
        }
      },
      // 总列数
      colNum: {
        type: Number,
        default: 12
      },
      // 行高度
      rowHeight: {
        type: Number,
        default: 150
      },
      // 最大行数
      maxRows: {
        type: Number
      },
      // 高度自动适应, 如设置该值，rowHeight将失效
      fitRow: {
        type: Boolean,
        default: false
      },
      // 网格边距
      margin: {
        type: Array,
        default() {
          return [10, 10]
        }
      },
      // 能否拖拽
      isDraggable: {
        type: Boolean,
        default: false
      },
      // 能否改尺寸
      isResizable: {
        type: Boolean,
        default: false
      },
      //  RTL/LTR should be reversed
      isMirrored: {
        type: Boolean,
        default: false
      },
      //  Says if the container height should swells and contracts to fit contents.
      autoSize: {
        type: Boolean,
        default: true
      },
      // Says if the layout should be compact vertically.
      verticalCompact: {
        type: Boolean,
        default: true
      },
      // Says if the CSS transition-property: transform; should be used.
      useCssTransforms: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        wrapperHeight: 'auto',
        fitRowHeight: this.rowHeight,
        itemEvents: {
          resize: (i, newH, newW, newHPx, newWPx) => {
            this.$emit('resize', i, newH, newW, newHPx, newWPx)
          },
          resized: (i, newH, newW, newHPx, newWPx) => {
            this.$emit('resized', i, newH, newW, newHPx, newWPx)
          },
          move: (i, newX, newY) => {
            this.$emit('move', i, newX, newY)
          },
          moved: (i, newX, newY) => {
            this.$emit('moved', i, newX, newY)
          }
        }
      }
    },
    computed: {
      layoutOptions() {
        const options = {...this.$props}
        options.rowHeight = this.fitRowHeight
        delete options.fitRow
        return options
      },
      rows() {
        return this.layout.map(n => n.y + n.h).sort((a, b) => b - a)[0]
      }
    },
    methods: {
      setRowHeight() {
        this.wrapperHeight = this.$el.parentNode.getBoundingClientRect().height
        this.fitRowHeight = (this.wrapperHeight - this.margin[1] * (this.rows + 1)) / this.rows
      }
    },
    mounted() {
      if (this.fitRow &amp;&amp; this.rows &amp;&amp; this.$el.parentNode) {
        this.proxySetRowHeight = debounce(this.setRowHeight, 100, true, this)
        addResizeListener(this.$el.parentNode, this.proxySetRowHeight)
      }
    },
    beforeDestroy() {
      if (this.$el.parentNode &amp;&amp; this.proxySetRowHeight) {
        removeResizeListener(this.$el.parentNode, this.proxySetRowHeight)
      }
    }
  }
&lt;/script>
</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-extension_charts_bar_xdh-bar-rankings.html">extension/charts/bar/xdh-bar-rankings</a></li><li><a href="module-extension_charts_graph_xdh-flow.html">extension/charts/graph/xdh-flow</a></li><li><a href="module-extension_charts_line_xdh-line-basic.html">extension/charts/line/xdh-line-basic</a></li><li><a href="module-extension_charts_line_xdh-line-stacked.html">extension/charts/line/xdh-line-stacked</a></li><li><a href="module-extension_charts_other_xdh-waterwave.html">extension/charts/other/xdh-waterwave</a></li><li><a href="module-extension_charts_pie_xdh-pie-gauge.html">extension/charts/pie/xdh-pie-gauge</a></li><li><a href="module-extension_charts_pie_xdh-pie-semiring.html">extension/charts/pie/xdh-pie-semiring</a></li><li><a href="module-extension_login.html">extension/login</a></li><li><a href="module-extension_xdh-admin.html">extension/xdh-admin</a></li><li><a href="module-extensions_xdh-exception.html">extensions/xdh-exception</a></li><li><a href="module-widgets_xdh-affix.html">widgets/xdh-affix</a></li><li><a href="module-widgets_xdh-anchor.html">widgets/xdh-anchor</a></li><li><a href="module-widgets_xdh-avatar.html">widgets/xdh-avatar</a></li><li><a href="module-widgets_xdh-back-top.html">widgets/xdh-back-top</a></li><li><a href="module-widgets_xdh-breadcrumb.html">widgets/xdh-breadcrumb</a></li><li><a href="module-widgets_xdh-capture.html">widgets/xdh-capture</a></li><li><a href="module-widgets_xdh-chart-card.html">widgets/xdh-chart-card</a></li><li><a href="module-widgets_xdh-ckeditor.html">widgets/xdh-ckeditor</a></li><li><a href="module-widgets_xdh-combo.html">widgets/xdh-combo</a></li><li><a href="module-widgets_xdh-contextmenu.html">widgets/xdh-contextmenu</a></li><li><a href="module-widgets_xdh-countdown.html">widgets/xdh-countdown</a></li><li><a href="module-widgets_xdh-countup.html">widgets/xdh-countup</a></li><li><a href="module-widgets_xdh-cropper.html">widgets/xdh-cropper</a></li><li><a href="module-widgets_xdh-curd.html">widgets/xdh-curd</a></li><li><a href="module-widgets_xdh-description-list.html">widgets/xdh-description-list</a></li><li><a href="module-widgets_xdh-dialog.html">widgets/xdh-dialog</a></li><li><a href="module-widgets_xdh-dialog-form.html">widgets/xdh-dialog-form</a></li><li><a href="module-widgets_xdh-echarts.html">widgets/xdh-echarts</a></li><li><a href="module-widgets_xdh-editor.html">widgets/xdh-editor</a></li><li><a href="module-widgets_xdh-ellipsis.html">widgets/xdh-ellipsis</a></li><li><a href="module-widgets_xdh-filter-panel.html">widgets/xdh-filter-panel</a></li><li><a href="module-widgets_xdh-flip.html">widgets/xdh-flip</a></li><li><a href="module-widgets_xdh-form.html">widgets/xdh-form</a></li><li><a href="module-widgets_xdh-go.html">widgets/xdh-go</a></li><li><a href="module-widgets_xdh-grid.html">widgets/xdh-grid</a></li><li><a href="module-widgets_xdh-grid-layout.html">widgets/xdh-grid-layout</a></li><li><a href="module-widgets_xdh-header.html">widgets/xdh-header</a></li><li><a href="module-widgets_xdh-image-picker.html">widgets/xdh-image-picker</a></li><li><a href="module-widgets_xdh-image-text.html">widgets/xdh-image-text</a></li><li><a href="module-widgets_xdh-layout.html">widgets/xdh-layout</a></li><li><a href="module-widgets_xdh-list.html">widgets/xdh-list</a></li><li><a href="module-widgets_xdh-list-panel.html">widgets/xdh-list-panel</a></li><li><a href="module-widgets_xdh-loading.html">widgets/xdh-loading</a></li><li><a href="module-widgets_xdh-marquee.html">widgets/xdh-marquee</a></li><li><a href="module-widgets_xdh-menu.html">widgets/xdh-menu</a></li><li><a href="module-widgets_xdh-menu-toggle.html">widgets/xdh-menu-toggle</a></li><li><a href="module-widgets_xdh-nav-tabs.html">widgets/xdh-nav-tabs</a></li><li><a href="module-widgets_xdh-pager.html">widgets/xdh-pager</a></li><li><a href="module-widgets_xdh-panel.html">widgets/xdh-panel</a></li><li><a href="module-widgets_xdh-print.html">widgets/xdh-print</a></li><li><a href="module-widgets_xdh-result.html">widgets/xdh-result</a></li><li><a href="module-widgets_xdh-scroll.html">widgets/xdh-scroll</a></li><li><a href="module-widgets_xdh-select.html">widgets/xdh-select</a></li><li><a href="module-widgets_xdh-skeleton.html">widgets/xdh-skeleton</a></li><li><a href="module-widgets_xdh-slide-panel.html">widgets/xdh-slide-panel</a></li><li><a href="module-widgets_xdh-table.html">widgets/xdh-table</a></li><li><a href="module-widgets_xdh-tabs.html">widgets/xdh-tabs</a></li><li><a href="module-widgets_xdh-tabs_sortable.html">widgets/xdh-tabs/sortable</a></li><li><a href="module-widgets_xdh-tag-canvas.html">widgets/xdh-tag-canvas</a></li><li><a href="module-widgets_xdh-tag-select.html">widgets/xdh-tag-select</a></li><li><a href="module-widgets_xdh-timeline.html">widgets/xdh-timeline</a></li><li><a href="module-widgets_xdh-title.html">widgets/xdh-title</a></li><li><a href="module-widgets_xdh-tree.html">widgets/xdh-tree</a></li><li><a href="module-widgets_xdh-tree-select.html">widgets/xdh-tree-select</a></li><li><a href="module-widgets_xdh-tree-table.html">widgets/xdh-tree-table</a></li><li><a href="module-widgets_xdh-watermark.html">widgets/xdh-watermark</a></li><li><a href="module-widgets_xdh-window.html">widgets/xdh-window</a></li></ul><h3>Classes</h3><ul><li><a href="module-widgets_xdh-tabs_sortable-Sortable.html">Sortable</a></li><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Events</h3><ul><li><a href="global.html#~event:change">change</a></li><li><a href="module-widgets_xdh-image-picker.html#~event:click">click</a></li><li><a href="module-widgets_xdh-dialog-form.html#~event:close">close</a></li><li><a href="module-widgets_xdh-pager.html#~event:current-change">current-change</a></li><li><a href="module-widgets_xdh-tabs.html#~event:edit">edit</a></li><li><a href="module-extension_xdh-admin.html#~event:header-nav-select">header-nav-select</a></li><li><a href="module-extension_xdh-admin.html#~event:header-search">header-search</a></li><li><a href="module-extension_xdh-admin.html#~event:header-tool-click">header-tool-click</a></li><li><a href="module-widgets_xdh-tree-select.html#~event:input">input</a></li><li><a href="module-widgets_xdh-grid-layout.html#~event:layout-updated">layout-updated</a></li><li><a href="module-extension_xdh-admin.html#~event:menu-select">menu-select</a></li><li><a href="module-widgets_xdh-capture.html#~event:on-capture">on-capture</a></li><li><a href="module-widgets_xdh-tag-select.html#~event:on-change">on-change</a></li><li><a href="module-widgets_xdh-tag-select.html#~event:on-checked-all">on-checked-all</a></li><li><a href="module-widgets_xdh-image-picker.html#~event:on-clear">on-clear</a></li><li><a href="module-widgets_xdh-nav-tabs.html#~event:on-click">on-click</a></li><li><a href="module-widgets_xdh-window.html#~event:on-closed">on-closed</a></li><li><a href="module-widgets_xdh-layout.html#~event:on-collapsed">on-collapsed</a></li><li><a href="module-widgets_xdh-table.html#~event:on-column-sort">on-column-sort</a></li><li><a href="module-widgets_xdh-nav-tabs.html#~event:on-command">on-command</a></li><li><a href="module-widgets_xdh-cropper.html#~event:on-crop">on-crop</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-dialog-close">on-dialog-close</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-dialog-open">on-dialog-open</a></li><li><a href="module-widgets_xdh-window.html#~event:on-drag">on-drag</a></li><li><a href="module-widgets_xdh-countdown.html#~event:on-end">on-end</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-hide">on-hide</a></li><li><a href="module-widgets_xdh-list-panel.html#~event:on-load-complete">on-load-complete</a></li><li><a href="module-widgets_xdh-window.html#~event:on-minimized">on-minimized</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-mouseenter">on-mouseenter</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-mouseleave">on-mouseleave</a></li><li><a href="module-widgets_xdh-header.html#~event:on-nav-select">on-nav-select</a></li><li><a href="module-widgets_xdh-capture.html#~event:on-output">on-output</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:on-query'">on-query'</a></li><li><a href="module-widgets_xdh-list-panel.html#~event:on-reach-bottom">on-reach-bottom</a></li><li><a href="module-widgets_xdh-list-panel.html#~event:on-reach-top">on-reach-top</a></li><li><a href="module-widgets_xdh-go.html#~event:on-ready">on-ready</a></li><li><a href="module-widgets_xdh-nav-tabs.html#~event:on-remove">on-remove</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:on-reset">on-reset</a></li><li><a href="module-widgets_xdh-window.html#~event:on-resize">on-resize</a></li><li><a href="module-widgets_xdh-table.html#~event:on-row-sort">on-row-sort</a></li><li><a href="module-widgets_xdh-list-panel.html#~event:on-scroll">on-scroll</a></li><li><a href="module-widgets_xdh-header.html#~event:on-search">on-search</a></li><li><a href="module-widgets_xdh-tree-select.html#~event:on-selected">on-selected</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-show">on-show</a></li><li><a href="module-widgets_xdh-slide-panel.html#~event:on-slide">on-slide</a></li><li><a href="module-widgets_xdh-window.html#~event:on-start-drag">on-start-drag</a></li><li><a href="module-widgets_xdh-window.html#~event:on-start-resize">on-start-resize</a></li><li><a href="module-widgets_xdh-window.html#~event:on-stop-drag">on-stop-drag</a></li><li><a href="module-widgets_xdh-layout.html#~event:on-stop-resize">on-stop-resize</a></li><li><a href="module-widgets_xdh-form.html#~event:on-submit">on-submit</a></li><li><a href="module-widgets_xdh-curd.html#~event:on-success">on-success</a></li><li><a href="module-widgets_xdh-header.html#~event:on-tool-click">on-tool-click</a></li><li><a href="module-widgets_xdh-contextmenu.html#~event:on-trigger">on-trigger</a></li><li><a href="module-widgets_xdh-editor.html#~event:on-upload">on-upload</a></li><li><a href="module-widgets_xdh-menu.html#~event:open">open</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:reset-expand-fields">reset-expand-fields</a></li><li><a href="module-widgets_xdh-menu.html#~event:select">select</a></li><li><a href="module-extension_xdh-admin.html#~event:sidebar-switch">sidebar-switch</a></li><li><a href="module-widgets_xdh-pager.html#~event:size-change">size-change</a></li><li><a href="module-widgets_xdh-tabs.html#~event:tab-add">tab-add</a></li><li><a href="module-extension_xdh-admin.html#~event:tab-click">tab-click</a></li><li><a href="module-extension_xdh-admin.html#~event:tab-remove">tab-remove</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:toggle">toggle</a></li><li><a href="module-widgets_xdh-affix.html#event:change">change</a></li><li><a href="module-widgets_xdh-back-top.html#event:click">click</a></li><li><a href="module-widgets_xdh-curd.html#~event:update:query">update:query</a></li><li><a href="module-widgets_xdh-filter-panel.html#~event:update:model">update:model</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#getWaterPositions">getWaterPositions</a></li><li><a href="global.html#loadAreaData">loadAreaData</a></li><li><a href="global.html#objToData">objToData</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#setAreaData">setAreaData</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Sun Oct 28 2018 10:45:35 GMT+0800 (CST)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
